<!DOCTYPE html>

<!--
  Google I/O 2011 HTML slides template
  
  Created by Luke Mahé (lukem@google.com) 
         and Marcin Wichary (mwichary@google.com).
   
  URL: http://go/io-html-slides
-->

<html>
  <head>
    <title>Google I/O</title>

    <meta charset='utf-8' />
    <script src='http://io-2011-slides.googlecode.com/svn/trunk/slides.js'></script>
  </head>
  
  <style>
    /* Your individual styles here, or just use inline styles if that’s
       what you want. */

    .code { font-family: 'Droid Sans Mono', 'Courier New', monospace; }
    
  </style>

  <body style='display: none'>

    <section class='slides layout-widescreen'>
      
      <!-- Your slides (<article>s) go here. Delete or comment out the
           slides below. -->
      
      <article class='biglogo'>
      </article>
      <article>
      	<p><img style="float: right;" src="https://chart.googleapis.com/chart?chs=500x500&cht=qr&chl=www.speakermeter.com/talks/geospatial-data-fusion-tables/&choe=UTF-8"/></p>
      	<h3>
          Session Info
        </h3>
				<p>Hashtags: <b>#io2011 #Geo</b></p>
				<p>Feedback: <a href="http://goo.gl/79Lvg">http://goo.gl/79Lvg</a></p>
      </article>

      <article>
        <h1>
          Managing and Visualizing your
          <br>
          Geospatial Data with Fusion Tables
        </h1>
        <p>
          Kathryn Hurley, James McGill<br />
          Guest Speaker: Simon Rogers, Guardian Datablog
          <br>
          May 10, 2011
        </p>
      </article>

      <article> 
        <h3> 
          Agenda
        </h3> 
	        <ul>
	          <li>Intro to Fusion Tables</li>
	          <li>Quick Demo</li>
	          <li>Building an Application with Fusion Tables</li>
	          <li>Google Maps API & Fusion Tables</li>
	          <li>Simon Rogers, Guardian Datablog</li>
	        </ul>
      </article> 

      <article> 
        <h2> 
          Intro to Fusion Tables
        </h2> 
      </article> 

      <article>
	      <h3>
	        Intro to Fusion Tables
	      </h3>
        <p>
          A database in the cloud used to store and visualize your data
        </p>
        <img src="images/vis1.png" />
        <p style="font-size: 15px;">
          * Source: Guardian
          <a target="_blank" href="http://www.guardian.co.uk/news/datablog/2011/mar/31/deprivation-map-indices-multiple">"Deprivation mapped: how you show the poorest (and richest) places in England"</a>
        </p>
      </article>
      <article>
	      <h3>
	        Another example visualization - Google Visualization API
	      </h3>
				<img src="images/vis2.png" style="margin-left: 150px;" />
				<p>Using Google Chart Tools to Create Interactive Dashboards<br />
					May 10, 02:30PM – 03:30PM / Room 1</p>
      </article>
      <article> 
        <h2> 
          Quick Demo
        </h2> 
      </article> 

      <article> 
        <h3> 
          Quick Demo
        </h3> 
	      <ul>
	        <li>"Merge" (aka Left Outer Join)</li>
	        <li>Permissions and Visibility</li>
	        <li>Create a Map
	          <ul style="margin-top: 10px;">
	            <li>Custom InfoWindow</li>
	            <li>Apply a Style</li>
	          </ul>
	        </li>
	      </ul>
      </article> 
			<article style="padding: 5px;">
				<object width="1100" height="690">
				<param name="movie" value="movies/ft_movie.swf">
				<embed src="movies/ft_movie.swf" width="1100" height="690"></embed>
				</object>
			</article>
      <article> 
        <h2> 
          Building an Application with Fusion Tables
        </h2> 
      </article>

      <article> 
        <h3> 
          Application ideas..
        </h3>
	      <ul>
	        <li>Newspapers around the world</li>
	        <li>Server connections for MMORPG</li>
	        <li>Dashboard for Sales Operations</li>
	        <li>Mapping store locations</li>
	        <li>Crowd sourcing for potholes</li>
	      </ul>
      </article>
      <article style="overflow: visible; position: absolute; z-index: 100;"> 
        <h3> 
          Application workflow - Mapping Newpapers Around the World
        </h3>
        <img style="display: block; margin: 125px 0 0 50px;" src="images/newspaper_app.png" />
      </article>
      <article style="position: absolute; z-index: 99; padding: 0;">
      	<img style="margin: 5px;" src="images/newspapers.png" />
      </article>
      <article>
        <h2> 
          API Details
        </h2>
      </article>
      <article> 
        <h3> 
          SQL API Details
        </h3>
	      <ul>
	        <li>REST API</li>
	        <li>SQL Queries</li>
<pre>
CREATE TABLE mytable (name: STRING, result: NUMBER)

INSERT INTO 123456 (name, result) VALUES ('Kat', 12)

SELECT * FROM 123456 WHERE name = 'Kat'

UPDATE 123456 SET result = 13 WHERE ROWID = '301'
</pre>
	        <li>OAuth for authorization</li>
	      </ul>
      </article>

      <article> 
        <h3> 
          Sample Code*
        </h3>
<pre>
query = 'CREATE TABLE mytable (name: STRING, result: NUMBER)'
  
headers = {
  'Content-Type': 'application/x-www-form-urlencoded',
}

serv_req = urllib2.Request(
  url='https://www.google.com/fusiontables/api/query',
  data=urllib.urlencode({'sql': query}),
  headers=headers)

//returns tableid if successful
tableid = urllib2.urlopen(serv_req)
</pre>
        <p><small>*Authorization steps omitted</small></p>
      </article>
      <article>
        <h2> 
          API Demo
        </h2>
      </article>
      <article style="padding: 0px;">
      	<object width="1100" height="690">
				<param name="movie" value="movies/api_movie.swf">
				<embed src="movies/api_movie.swf" width="1100" height="690"></embed>
				</object>
      </article>
      <article>
        <h2> 
          New Features
        </h2>
      </article>
      <article> 
        <h3> 
          New API Features!
        </h3>
        <ul>
          <li>Map Feature Styling</li>
          <li>Info Window Customization</li>
        </ul>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <p>Now launching to trusted testers</p>
      </article>
      <article>
        <h3>How to be a trusted tester</h3>
        <div style="text-align: center; margin-top: 200px;">
          <p>Sign up here:</p>
          <p><b>fusion-tables-api-trusted-testers@googlegroups.com</b></p>
        </div>
      </article>
      <article>
      	<h3>How do these new features work?</h3>
      	<ul>
      		<li>REST API</li>
      		<li>JSON objects represent styles and templates</li>
      	</ul>
      	<pre>
{
  ...
  "tableId": 12345,
  "markerOptions": {
    "iconName": "small-blue"
  }
  ...
}
      	</pre>
      </article>
      <article>
      	<h3>Why is this awesome?</h3>
      	<ul>
      		<li>Great if you're creating lots of tables<br />
      			<img src="images/tables.png" height="150" style="margin: 15px 0; display: inline;" />
      			<img src="images/tables.png" height="150" style="margin: 15px 0; display: inline;" /></li>
      		<li>Find out how public tables are styled</li>
      		<li>Part of the Google APIs Console</li>
      		<li>Google supported client libraries, makes OAuth easier</li>
      	</ul>
      </article>
      <article>
        <h3>Trusted Testers needed!</h3>
        <div style="text-align: center; margin-top: 200px;">
          <p>Sign up here:</p>
          <p><b>fusion-tables-api-trusted-testers@googlegroups.com</b></p>
        </div>
      </article>
      <article> 
        <h2> 
          Google Maps API <span style="font-size: 100px; color: #465886;"> &</span> Fusion Tables
        </h2> 
      </article> 
 
      <article> 
        <h3> 
          Mapping your data
        </h3> 
        <br><center><img style="-webkit-border-radius: 5px;" src="tableid.png" height="52.5px" width="807px"/></center> 
        // TODO(jmcgill): Clean up this image.
        <section> 
        <pre class="prettyprint lang-html linenums"> 
var layer = new FusionTablesLayer({
  select: 'column',
  from: 12345,
}); 
</pre> 
        </section> 
      </article> 
 
      <article> 
        <h3>Presto!</h3> 
        <iframe height="450px" width="790px" src="map.html" style="border: none; -webkit-border-radius: 15px; margin-top: 15px;"></iframe> 
      </article> 
 
      <article> 
        <h3> 
          Adding conditions
        </h3> 
        <section> 
        <span style="margin-top: 20px; font-size: 30px; font-family: monospace"> 
        <!--<pre class="prettyprint lang-html linenums">--> 
var layer = new FusionTablesLayer({<br> 
  &nbsp;&nbsp;select: 'column',<br> 
  &nbsp;&nbsp;from: 12345,<br> 
  &nbsp;&nbsp;<span style="color: red;">where: "Age > 10"</span><br> 
}); 
<!--</pre>--> 
        </span><br><br><br> 
        <center><img src="selected.png" style="-webkit-border-radius: 15px; -webkit-box-shadow: 5px 5px 5px #888;"/></center> 
        </section> 
      </article> 
 
      <article> 
        <h3>Honing in</h3> 
        <span id="query_1" style="margin-top: 20px">Query: "SELECT *"</span> 
        <iframe name="inside" height="430px" width="790px" src="map.html" style="border: none; -webkit-border-radius: 15px; margin-top: 15px;"></iframe> 
        <center><input type="button" onclick="filter_1()" value="Filter"></center> 
      </article> 
 
      <article> 
        <h3>Customizing behaviour</h3> 
        TODO(jmcgill): Example using custom infowindows.  
      </article> 
 
      <article> 
        <h2> 
          Why use FusionTables layer?
        </h2> 
      </article> 
 
      <article> 
        <h3>Performance</h3> 
        <iframe name="graph_1" height="330px" width="790px" src="graph.html" style="border: none; -webkit-border-radius: 15px; margin-top: 15px;"></iframe> 
         <center><img src="https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000" height="68px" width="42px"/> x 1000 = N Seconds</center> 
      </article> 
      
     <article> 
        <h3>Tiled Rendering</h3> 
        <table><tr><td><img src="http://carmenseleven.pbworks.com/f/04azcarmen.jpg"/></td><td> 
        "I have stolen your slide"</td></tr></table> 
     </article> 
 
      <article> 
        <h3>Performance revised</h3> 
        <iframe name="graph_2" height="330px" width="790px" src="graph2.html" style="border: none; -webkit-border-radius: 15px; margin-top: 15px;"></iframe> 
         <center><img src="https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000" height="68px" width="42px"/> x 1000 = N Seconds</center> 
      </article> 
 
      <article> 
        <h2> 
          Add a little <span style="letter-spacing: 10px"><span style="color: #456BC6">S</span><span style="color: #5C8237">t</span><span style="color: #C74B3D">y</span><span style="color: #EBCC44">l</span><span color="#3C3C3C">e</span></span> 
        </h2> 
     </article> 
 
      <article> 
        <h3>Styled layers</h3> 
        <iframe name="inside" height="430px" width="790px" src="map_styled.html" style="border: none; -webkit-border-radius: 15px; margin-top: 15px;"></iframe> 
        <center>[--------------------[]---------] 100%</center> 
       </article> 
 
 
     <article> 
        <h3> 
          Styling syntax
        </h3> 
        <section> 
        <span style="font-size: 18px;"> 
        <pre class="prettyprint lang-html linenums"> 
var layer = new FusionTablesLayer({
  select: 'column',
  from: 12345,
  where: "Age < 10",
  styles = [
    {
      where: "Age < 5",
      polyline: {
        strokeColor: "#FF0000",
        fillColor: "#00FF00"
      }
    },
    {
      where: "Age < 8",
      polyline: {
        strokeColor: "#FF0000",
        fillColor: "#00FF00"
      }
    },
  ]
}); 
</pre> 
</span> 
<div style="background: red; -webkit-border-radius: 15px; position: absolute; top: 200px; left: 530px; height:250px; width: 250px; color: white;"><br><br><center>TODO: Example.</center></div> 
    </section> 
      </article> 
 
     <article> 
        <h3> 
          Default styles
        </h3> 
        <section> 
        <span style="font-size: 18px;"> 
        <pre class="prettyprint lang-html linenums"> 
var layer = new FusionTablesLayer({
  select: 'column',
  from: 12345,
  where: "Age < 10",
  styles = [
    {
      where: "Age < 5",
      polyline: {
        strokeColor: "#FF0000",
        fillColor: "#00FF00"
      }
    },
    {
      // No 'where' => Default style.
      polyline: {
        strokeColor: "#FF0000",
        fillColor: "#00FF00"
      }
    },
  ]
}); 
</pre> 
</span> 
<div style="background: red; -webkit-border-radius: 15px; position: absolute; top: 200px; left: 530px; height:250px; width: 250px; color: white;"><br><br><center>TODO: Example.</center></div> 
    </section> 
      </article> 
 
     <article> 
        <h3> 
          Pitfalls
        </h3> 
        <section> 
        <span style="font-size: 18px;"> 
        <pre class="prettyprint lang-html linenums"> 
var layer = new FusionTablesLayer({
  select: 'column',
  from: 12345,
  where: "Age < 10",
  styles = [
    {
      where: "Age > 10",
      polyline: {
        strokeColor: "#FF0000",
        fillColor: "#00FF00"
      }
    },
  ]
}); 
</pre> 
</span> 
<center><span style="color: #C74B3D">Age > 10</span> ∩ <span style="color: #456BC6">Age < 10</span> = ∅.</center> 
    </section> 
      </article> 
      <article> 
        <h3> 
          Worth noting
        </h3> 
        <ul> 
          <li> 
            Up to 3 styles (+ 1 default) per layer.
          </li><li> 
            Up to 5 layers per map.
          </li><li> 
            Part of the Maps API Experimental Features.
          </li><li> 
            Check out the reference - live now!
          </li> 
        </ul><br><br> 
        <center><img src="http://www.zorgloob.com/picleft/labs2.png"></center> 
      </article> 
      <article> 
        <h2> 
          Simon Rogers<br />Editor, Guardian Datablog
        </h2> 
      </article>
      <article>
        <h3> 
          Summary
        </h3> 
      	<ul>
      		<li>New features in the Fusion Tables API:<ul>
      			<li>Map Feature Styling</li>
      			<li>Info Window Customization</li>
      			<li>Trusted Testers Needed!<br />
      				<b>fusion-tables-api-trusted-testers@googlegroups.com</b></li>
      		</ul></li>
      		<li>New Google Maps API Feature:<ul>
      			<li>Dynamic Styling</li>
      		</ul></li>
      	</ul>
      </article>
      <article> 
        <h3> 
          Links
        </h3> 
        <ul> 
          <li>Fusion Tables - <a href="http://www.google.com/fusiontables">http://www.google.com/fusiontables</a></li>
	        <li>Fusion Tables API - <a href="http://code.google.com/apis/fusiontables">http://code.google.com/apis/fusiontables</a></li>
	        <li>Google Maps API - <a href="http://code.google.com/apis/maps">http://code.google.com/apis/maps</a></li>
	        <li>Fusion Tables Forum  - <a href="http://goo.gl/JZGqr">http://goo.gl/JZGqr</a></li>
	        <li>Twitter - @<a href="http://www.twitter.com/GoogleFT">GoogleFT</a> #io2011 #Geo</li>
					<li>Session Feedback - <a href="http://goo.gl/79Lvg">http://goo.gl/79Lvg</a></li>
        </ul>
      </article>
      <article>
	      <h2>Questions?</h2>
      </article>

    </section>

  </body>
</html>
